Capital Area Counseling Responsive Redesign
THE PROBLEM:
During our conducted interviews and survey, we discovered users felt the Capital Area Counseling website’s purpose was obscure, as well as visually unpleasant.
PROBLEM STATEMENT:
Capital Area Counseling was designed to provide low-cost, high quality psychotherapy services. We have observed that their website is not adequately communicating these goals, which are creating user doubt, confusion and ambiguity amongst site visitors. How might we improve the CAC website so that users can explore and leave the site feeling confident about the organization's purpose and services through our website redesign?
HYPOTHESIS:
We believe that by redesigning the Capital Area Counseling website we will clarify the goals and awareness of CAC as a mental health counseling facility. We will enhance the user experience as a comprehensive tool for information scheduling, and all other counseling needs by making the site more functional, credible, and more visually appealing. We know this hypothesis to be valid because we know that our target user will benefit from a transparent and functional site that offers affordable counseling.
THE SOLUTION:
We might do this by reorganizing the website in its current state and rebranding CAC as a whole. Doing this will allow Capital Area Counseling to provide users with the resources they need when seeking therapy and also create a delightful web experience.
We strongly believe in a growing need for quality mental health services at an affordable price. In a COVID-19 world, counseling and mental health is prominent and ever-changing with the times from in-person to virtual. We want to redesign to enhance the user’s experience using the site as a comprehensive tool for information, scheduling, and virtual counseling activity.
We began the research process by evaluating the current Capital Area Counseling site and creating our proto-persona: Lilly.
Using Lilly as our inspiration we dove deeper into research by creating a user survey, completing a competitor analysis, and conducting user interviews. We wanted to gain knowledge from users about how they perceive mental health, seeking counseling and their thoughts and takeaways from the current site design.
SURVEY:
76.7% of users felt the site could use improvements especially with the information architecture, footer, logo, and images.
We conducted a competitor analysis with direct competitors: Open Path Collective and Better Help and indirect competitors: teladochealth.com and Psychology Today.
USER INTERVIEWS
We learned a lot from our users and some key findings were that seeking counseling is intimidating to say the least. Negative mental health stigmas are still prevalent and it’s really hard to try to change your mental health when you’re in crisis or any other kind of downward state.
Users wanted easy scheduling and payment, they wanted their counselor to be a good match, and they wanted the overall look and feel of the site to be calming, easy to absorb yet informative, visually pleasing, engaging and credible.
We combined all our user insights into an affinity diagram. Using these insights, we expanded on our proto-persona by creating an empathy map of what Lilly feels, thinks, sees, and says along with goals and pain points.
AFFINITY DIAGRAM
EMPATHY MAP
Using the the affinity diagram and empathy map we created our user's story and further defined the problem.
USER PERSONA: LILLY ROGERS
VALUE PROPOSITION STATEMENT:
Our organization Bluebonnet Counseling is redesigning our website to help site visitors achieve clarity about what we do at CAC and utilize the resources we offer.
CAC is better because we provide affordable, high-quality mental health services and support.
We’re believable because we’re backed by the local community who support and fund our tailored and economical counseling efforts.
IDEATING
Using the "I Like" "I Wish" "What If?" Brainstorming method we created a feature prioritization matrix of possible features that would enhance the counseling experience for Lilly and all users.
FEATURE PRIORITIZATION MATRIX
Using our user insights, and favorite features we dove deeper into the creation of Lilly's story by defining the UX scenario and applying it to a user journey map and storyboard.
USER JOURNEY MAP
STORYBOARD
Next we translated Lilly's journey into a user flow
INFORMATION ARCHITECTURE
After defining our user's flow, we conducted a card sorting of the current site and then created our sitemap for our redesign.
CARD SORTING
SITE MAP
With our structure outlines and our user defined, we moved into wire-framing, prototyping, and testing.
LO-FIDELITY SKETCHES
We began sketching potential layouts for the redesign.
MID-FIDELITY SOLUTIONS
We then wireframed design solutions in Figma with these goals in mind:
• A captivating homepage that gives users an understanding of the purpose of the
organization and a glimpse of what the website has to offer.
• Information about the background of the organization and its people.
• To be transparent with users about how the process works and what to expect as a
patient and as a volunteer as well.
• A quick and easy way for users to contact the organization.
• A profile page where users can see upcoming sessions and documents, schedule
appointments, and make payments.
TESTING THE MID-FIDELITY SOLUTIONS
Now it was time to validate out solutions. We conducted usability tests with these questions in mind:
• How do users feel about the layout and
function of the site?
• Are users able to find the information they're
looking for?
• Do users understand the purpose of the site
and the company?
• Is the profile page user-friendly and provide
users with all the necessary information?
• How do users feel leaving the site?
5 participants were recruited to test the re-design via zoom.
" I feel like I could easily find what I was looking for as a first-time viewer looking at this site, especially if I was in an emotional crisis, I could find the info I need."
- Participant 3
USER INSIGHTS
Positive Feedback
• Users were able to complete the tasks.
• Users were pleased with the layout.
• Users felt the content was well-organized,
concise, and easy to consume.
• Users felt they were able to find the information
they were looking for.
• Users left the site feeling informed.
Opportunities
• Users expressed they would like to see more
calls-to-action to get started so users can begin the process.
• More about how the counselors are student volunteers in the
homepage so users understand how it works upfront.
• Because the company runs on donations and volunteers,
users overall felt this information should be displayed and
more obvious to find.
STYLE GUIDE
We were going for a simple, clean, cohesive look with a soothing feel. We played on the Bluebonnet theme and used the flower's unique blue and its compliment, Lonestar Gold, as well as Agave Green, and BLM Black. We incorporated real-life images that evoke both emotion and trust.
Using our style guide and user testing as our template we moved into to hi-fidelity prototyping and Front-End-Development.
ITERATIONS FROM LO TO MID TO HI FIDELITY
Users wanted more clarity about the what exactly a professional volunteer is, and distinguished sections for donate and volunteer. Therefore we added a section to the home page that clarifies the role of professional student volunteers as counselors.
And we added a secondary navigation bar to the "What You Can Do" page, to allow users to easily locate and transition between "Donate" and Become a Volunteer"
HI-FI TESTING
Overall, our users found the HI-Fidelity prototype to be easy to navigate, visually pleasing, and they found the purpose of the site to be very clear. Our feedback was mostly visual suggestions like adding more leafy backgrounds to pages and fixing alignment issues.
FURTHER OPPORTUNITIES
• Everything fully fleshed-out meet the team bios, types of services pages, etc.
• FAQ Page
• Profiles in account portal
• Chat/Text Feature
• Stakeholder Collaboration
• Develop A Counselor Matching Process
• More testing and iterating
CONCLUSION
• Informative without being overwhelming
• Clear and Concise
• Calming visual style
• Simple and clean with appropriate delightfulness
• Normalize and support mental health!
• Clear and Concise
• Calming visual style
• Simple and clean with appropriate delightfulness
• Normalize and support mental health!
